<!--
 * @Author: 朱安武 549410045@qq.com
 * @Date: 2023-01-13 11:55:05
 * @LastEditors: 朱安武 549410045@qq.com
 * @LastEditTime: 2023-02-03 11:02:31
 * @FilePath: \mobile\src\components\Swiper.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" lazy-render>
            <van-swipe-item v-for="item in imgList" :key="item.bannerid">
                <img v-lazy="item.img" class="swipeImg" />
            </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { checkImg } from '../services'
import type { Banner } from '../services'

let imgList = ref<Banner[]>([])

onMounted(async () => {
    const { data } = await checkImg()
    imgList.value = data.data ?? []
})
</script>

<style lang="scss" scoped>
.my-swipe .van-swipe-item {
    width: 375px;
    height: 175px;
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;

    .swipeImg {
        width: 100%;
        height: 100%;
    }
}
</style>